<template>
	<view class="container">
		<u-navbar 
			title="作品库" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<z-paging
			ref="paging"
			v-model="workList"
			@query="getList" 
			auto-show-back-to-top 
			:empty-view-text="emptyText" 
			:empty-view-img="emptyImg" 
		>
			<template v-slot:top>
				<view :style="{'margin-top': sHeight}">
					<view style="width: 100%;padding: 0 150rpx;background-color: #fff;">
						<!-- 顶部分类（施工图，效果图） -->
						<u-tabs
							style="margin-top: 40rpx;font-size: 34rpx;width: 50%;"
							class="typeStyle"
							:list="styleTabList" 
							:duration="0.3"
							bg-color="#fff"
							:is-scroll="false" 
							v-model="styleCurrent" 
							@change="handleChangeStyleTab"
							active-color="#333"
							inactive-color="#666"
							:bar-style="barStyle"
						></u-tabs>
					</view>
					<!-- 一级分类 -->
					<u-tabs
						v-if="haveWorks"
						name="name" 
						class="oneTab"
						count="" 
						:list="tabList" 
						bg-color="#fff"
						:is-scroll="true" 
						v-model="current"
						@change="(e)=>{ currentTwo=0; handleChangeTabTwo(tabList[e].id, true) }"
						active-color="#3b8cdc"
						inactive-color="#999"
						font-size="28"
						:barStyle="{
							width: '130rpx',
							height: '6rpx',
						}"
					></u-tabs>
					<!-- 二级分类 -->
					<u-tabs
						v-if="haveWorks"
						name="name" 
						count="" 
						class="twoTab"
						:list="tabListTwo" 
						bg-color="rgba(0,0,0,0)"
						:is-scroll="true" 
						v-model="currentTwo"
						@change="handleChangeTwoClass"
						active-color="#3b8cdc"
						inactive-color="#999"
						:active-item-style="{
							backgroundColor: '#E1F0FF'
						}"
					></u-tabs>
					<!-- <u-tabs
						style="margin-top: 40rpx;font-size: 34rpx;"
						:list="tabList" 
						:duration="0.3"
						bg-color="#fff"
						:is-scroll="false" 
						v-model="current" 
						@change="handleChangeTab"
						active-color="#333"
						inactive-color="#666"
						:bar-style="barStyle"
					></u-tabs> -->
				</view>
			</template>
			<view class="goodsWrapper">
				<view class="goodsItem" v-for="item in workList" :key="item.id" @tap.stop="ToDetail(item.id)">
					<image style="width: 100%;" :src="item.image" mode="scaleToFill"></image>
					<view class="item-bottom">
						<view class="title">{{ item.name }}</view>
						<view class="info">
							<view class="avatar">
								<image class="avatar" src="http://shejihm.oss-cn-beijing.aliyuncs.com/202404081716451712567805660400ddad8.png" mode=""></image>
							</view>
							<text class="nickname">设计很忙</text>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {getCurrentInstance, ref } from 'vue'
	import { onLoad, onShow } from "@dcloudio/uni-app"
	const {proxy} = getCurrentInstance()
	
	const sHeight = ref('')
	const haveWorks = ref(true)  //是否有作品
	const emptyText = '没有更多了'
	const empty = 'http://jinjukeji.oss-cn-hangzhou.aliyuncs.com/cardoctor1663661926837.png'
	const tabList = ref([])
	const tabListTwo = ref([])
	const styleTabList = ref([
		{name: '施工图', value:1},
		{name: '效果图', value:2}
	])
	const workList = ref([])  //作品列表
	const styleCurrent = ref(0)
	const current = ref(0)
	const currentTwo = ref(0)
	const barStyle = {
		width: '120rpx',
		height: '12rpx',
		background: 'linear-gradient(90deg, #3B8CDC 0%, rgba(59,140,220,0) 100%)',
		borderRadius: '0',
		bottom: '10rpx !important',
		left: '-36rpx',
	}
	onLoad((option)=>{
		haveWorks.value = true //有作品
		let type = option.type
		styleCurrent.value = type==1 ? 0 : type==2 ? 1 : undefined
		getStatusHeight() //适配顶部高度
		handleChangeTab()
	})
	// onShow(()=>{
		
	// })
	// 切换二级分类
	function handleChangeTwoClass(){
		proxy.$refs.paging.reload();
	}
	function getStatusHeight() {
		sHeight.value = uni.getSystemInfoSync().statusBarHeight + 44 + 'px';
	}
	function handleChangeStyleTab(e){
		haveWorks.value = true
		current.value = 0
		currentTwo.value = 0
		proxy.$nextTick(()=>{
			setTimeout(()=>{
				handleChangeTab(true)
			}, 200)
		})
	}
	// 获取一级分类
	function handleChangeTab(isReload=false){
		let query = {
			pid: 0,
			type: styleCurrent.value + 1
		}
		proxy.api.worksCategoryList(query).then(res=>{
			tabList.value = res.data.data.map(item=>{
				return {
					...item, 
					icon: item.logo
				}
			})
			current.value = 0
			// 如果tabList为空，给haveWorks赋值为false(该字段默认为true)
			if(res.data.data&&res.data.data.length==0){
				haveWorks.value = false
			}
			handleChangeTabTwo(tabList.value.length ? tabList.value[0].id : '10086', isReload)
		})
	}
	// 获取二级分类
	function handleChangeTabTwo(pid, isReload){
		proxy.api.worksCategoryList({pid: pid}).then(res=>{
			tabListTwo.value = [
				{name:'全部', id: ''},
				...res.data.data
			]
			if(isReload){
				proxy.$refs.paging.reload();
			} else {
				getList()
			}
		})
	}
	// 获取列表
	function getList(pageNo=1, pageSize=10){
		proxy.$nextTick(()=>{
			setTimeout(()=>{
				let query = {
					pageNo: pageNo,
					pageSize: pageSize,
					oneCategoryId: tabList.value.length ? tabList.value[current.value].id : '1008610010123456789',  //随便写的id,只要查不出二级分类就行
					worksCategoryId: tabListTwo.value.length ? tabListTwo.value[currentTwo.value].id : '',
				}
				proxy.api.worksList(query).then(res=>{
					// workList.value = res.data.rows
					proxy.$refs.paging.complete(haveWorks.value ? res.data.data.records : []);
				})
			}, 200)
		})
	}
	// 跳转详情
	function ToDetail(id){
		uni.navigateTo({
			url:`/pages/menusByIndex/compositionDetail?id=${id}`
		})
	}
</script>

<style lang="scss">
	.oneTab ::v-deep .u-tab-item{
		font-weight: bold !important;
	}
	.oneTab ::v-deep .u-tab-bar{
		left: -46rpx !important;
		height: 6rpx !important;
		border-radius: 0 !important;
	}
	.twoTab ::v-deep .u-tab-bar{
		display: none !important;
	}
	.twoTab ::v-deep .u-tab-item{
		font-size: 24rpx !important;
		height: 52rpx !important;
		line-height: 52rpx !important;
		// background-color: red !important;
		border-radius: 27rpx !important;
		margin: 26rpx 0 !important;
	}
	.twoTab ::v-deep .u-scroll-box{
		padding-left: 20rpx !important;
		padding-right: 20rpx !important;
	}
.container{
	width: 100vw;
	height: 100vh;
	overflow-y: scroll;
	background-color: $uni-bg-color-grey;
	.goodsWrapper{
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
		width: calc(100vw - 40rpx);
		margin-left: 20rpx;
		position: relative;
		.goodsItem{
			width: 340rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-bottom: 40rpx;
			background-color: #fff;
			&>image{
				height: 340rpx;
			}
			.item-bottom{
				padding: 0rpx 16rpx 22rpx 16rpx;
				.title{
					font-family: 'PingFang SC';
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					margin-bottom: 5rpx;
				}
				.info{
					display: flex;
					justify-content: flex-start;
					line-height: 42rpx;
					.avatar{
						width: 42rpx;
						height: 42rpx;
						border-radius: 50%;
						overflow: hidden;
					}
					.nickname{
						font-family: 'PingFang SC';
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
						line-height: 33rpx;
						margin-left: 10rpx;
						position: relative;
						top: 4rpx;
					}
				}
			}
			
		}
	}
}
</style>
